
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="keywords" content="">

  <meta name="description" content="">

  <title>MAP</title>

  <style>

    body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; }

    .my-map { margin: 0 auto; width: 100%; height: 440px; }

    .my-map .icon { background: url(static/image/marker.png) no-repeat; } 

    .my-map .icon-cir { height: 31px; width: 28px; }

    .my-map .icon-cir-red { background-position: -11px -5px; }

    .amap-container{height: 100%;}

    .amap-info-content{

      border-radius: 10px;

    }

    .amap-info-content h5{

      color: #C9434B;

      margin: 10px auto 15px;

    }

    @media all and (max-width: 500px){

      .my-map{

        height: 300px;

      }

    }

  </style>

</head>

<body>

<div id="wrap" class="my-map">

  <div id="mapContainer"></div>

</div>



<script src="static/js/maps.js"></script>


<script>


!function(){

    var infoWindow, map, level = 16,

      center = {lng: 116.651053, lat: 38.637327},

      features = [{type: "Marker", name: "廊坊涂鑫防腐材料有限公司", desc: "联系电话：13031497687<br/>地址：河北省廊坊市大城县大城县臧屯乡张贾村<br/>", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 116.651053, lat: 38.637327}}];



    function loadFeatures(){

      for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){

        data = features[i];

        switch(data.type){

          case "Marker":

            feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),

              zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,

              content: '<div class=\"icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'\"></div>' });

            break;

          case "Polyline":

            for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){

              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));

            }

            feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,

              strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });

            break;

          case "Polygon":

            for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){

              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));

            }

            feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,

              strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,

              fillColor: data.fillColor, fillOpacity: data.fillOpacity });

            break;

          default: feature = null;

        }

        if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }



      }

    }



    function mapFeatureClick(e){

      if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }

      var extData = e.target.getExtData();

      infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");

      infoWindow.open(map, e.lnglat);

    }



    map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});



    map.setLang("zh-cn");



    loadFeatures();



    map.on('complete', function(){

      map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){

        map.addControl(new AMap.ToolBar({ruler: true, direction: true, locate: false}));

        map.addControl(new AMap.OverView({isOpen: true}));

        map.addControl(new AMap.Scale);

      });

    })





  }();
  </script>
<!-- </script> -->

</body>

</html>